<template>
  <div id=product>
    <div class="product-top">
        <el-button type="primary" @click="addProgram">添加</el-button>
        <el-input v-model="input" placeholder="请输入产品名称" style="width:15%;
                margin:0 10px 0 25px"></el-input>
        <el-button type="primary" @click="search">查询</el-button>
    </div>
    <div class="product-center">
        <el-table
    :data="program"
    stripe
    style="width: 100%">
    <el-table-column 
      prop="id"
      label="编号"
      width="130"
      align="center">
    </el-table-column>
    <el-table-column
      prop="name"
      label="栏目名称"
      width="370"
      align="center">
    </el-table-column>
    <el-table-column
      prop="num"
      label="序号"
      width="360"
      align="center">
    </el-table-column>
    <el-table-column
      prop="parentId"
      label="父栏目"
      width="280"
      align="center">
    </el-table-column>
    <el-table-column
      label="操作"
      align="center">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
        <el-button type="text" size="small" @click="change(scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
    </div>
    <div class="product-footer">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage1"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total">
            </el-pagination>
    </div>

    <!-- 模态框 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
  <el-form :model="form" :rules="rules" ref='ruleForm'>
    <el-form-item label="栏目名称" :label-width="formLabelWidth" prop="name">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="序号" :label-width="formLabelWidth" prop="num">
      <el-input v-model.number="form.num" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="所属栏目" :label-width="formLabelWidth" prop="parentId">
      <el-select v-model="form.parentId" placeholder="请选择活动区域">
        <el-option :label="item.id" :value="item.id" v-for="item in categorys" :key="item.id"></el-option>
      </el-select>
    </el-form-item>


  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
  </div>
</el-dialog>
  </div>
</template>

<script>
import DropdownMenu from '@/components/Share/DropdownMenu';
import qs from 'querystring';


export default {
  data(){
      return{
          input:"",
          program:[],
          currentPage1:1,
          pageSize:6,
          total:0,
          title:"添加栏目信息",
          categorys:[],
          dialogFormVisible: false,
          form: {
            name: '',
            num: '',
            parentId: '',
          },
          formLabelWidth: '120px',
          rules: {
            name: [
              { required: true, message: '请输入栏目名称', trigger: 'blur' },
              { min: 3, max: 5, message: '长度在 3 到 15 个字符', trigger: 'blur' }
            ],
            num: [
              { required: true, message: '序号不能为空'},
              { type: 'number', message: '序号必须为数字值'}
            ],
            parentId: [
              { required: true, message: '请选择所属栏目', trigger: 'change' }
            ]
            
          }
        }
  },
  methods:{
      //添加确认点击
      submitForm(formName) {
        var self=this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            self.$axios.post("/category/saveOrUpdate",qs.stringify(self.form)).then(response=>{
              if(response.data.status==200){
                this.$message({
                    type: 'success',
                    message: '保存成功!'
                });
                self.findAll();
              }else{
                this.$message.error("删除失败");
              }
              self.dialogFormVisible=false;
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //添加按钮
      addProgram(){
        this.dialogFormVisible=true;
        this.title="添加栏目信息";
        this.form={
          name:"",
          num:"",
          parentId:''
        }
        
      },

      //编辑操作
      change(row){
        this.dialogFormVisible=true;
        this.title="修改栏目信息";
        this.form={
            id:row.id,
            name: row.name,
            num: row.num,
            parentId:row.parentId,
        }
      },

      //分页查询封装函数
      findAll(name){
          if(name){
            var data={
              page:this.currentPage1-1,
              pageSize:this.pageSize,
              name:this.input
          }
          }else{
            var data={
              page:this.currentPage1-1,
              pageSize:this.pageSize
          }
          }
          this.$axios.post("/category/query",qs.stringify(data)).then(response=>{
              this.program=response.data.data.list;
              this.total=response.data.data.total;
          })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
          //根据分页发送请求
         // console.log(val);
          this.currentPage1=val;
          this.findAll();
         
      },

      //删除函数
      handleClick(row){
          var id=row.id;
          var self=this;
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.$axios.get("/category/deleteById",{params:{id}}).then((response)=>{
              if(response.data.status==200){
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                  });
                  self.findAll();
              }else{
                  this.$message.error("删除失败");
              }
          })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
          
      },

      //查询功能
      search(){
        if(this.input){
          this.findAll(this.input);
        }else{
          this.findAll();
        }
      },

      findAllCategorys(){
        this.$axios.get("/category/findAll").then(response=>{
          this.categorys=response.data.data;
          console.log(response.data.data)
        })
    },
      
  },
  created(){
      this.findAll();
      this.findAllCategorys();
  }
  
}
</script>

<style lang="scss" scoped>
</style>
